<html>
<head>
<style>
      html {
		margin:0px;
		padding:0px;
		overflow-x:hidden;
	  }
	  body {
	    margin:0px;
	    padding:0px;
	  }
	  #header {
	    font-size:14px;
		color:#3b3e58;
		font-family:arial;
		text-align:left;
		margin-top:14px;
		margin-bottom:5px;
	  }
	  #main {
	    float:left;
	    width:300px;
		margin-left:4px;
	  }
	  #list {
	    width:280px;
	    float:left;
	    border:1px solid #d2d2d2;
		margin-top:10px;
		padding-top:6px;
	  }
	  #save-session-box {
	    width:280px;
	    float:left;
	    border:1px solid #d2d2d2;
		margin-top:19px;
		padding-top:8px;
		padding-bottom:4px;
		margin-bottom:10px;
	  }

	  .box-title {
	    position:absolute;
		z-index:1;
		font-size:11px;
		font-family:arial;
		background-color:#ffffff;
		color:#000000;
		padding-left:5px;
		padding-right:5px;
      }
	  .row {
	    width:100%;
	    float:left;
		clear:both;
		font-size:12px;
		color:#000000;
		border-bottom:1px solid #d2d2d2;
		padding-top:5px;
		padding-bottom:2px;
		cursor:default;
		background-color:#ffffff;
	  }
	  div.row:hover {
	     background-color:#fdffe3;
	  }

	  .selected {
	     background-color:#dce7ff;
	  }
	  div.selected:hover {
	     background-color:#dce7ff;
	  }
	  .title {
	    float:left;
		font-size:12px;
		font-family:arial;
		color:#000000;
		margin-left:5px;
	  }
	  .num {
	    float:left;
		clear:both;
		font-size:11px;
		font-family:arial;
		color:#000000;
		margin-left:5px;
		margin-top:5px;
	  }

	  .disabled .favicon {
	     opacity:0.4;
	  }
	  .disabled .title{
	     color:#8c8c8c;
	  }
	  .disabled .text{
	     float:right;
		 font-size:12px;
		 font-family:arial;
		 text-decoration:none;
	     color:#929292;
	  }
	  a {
	    float:right;
		margin-top:5px;
		font-size:11px;
		font-family:arial;
		text-decoration:none;
		color:#0033cc;
	  }
	  a:hover {
		text-decoration:underline;
	  }

	  .separator {
	    float:right;
		margin-left:4px;
		margin-right:4px;
		font-size:12px;
		font-family:arial;
		color:#000000;
		margin-top:5px;
	  }

	  #form {
	    float:left;
	    padding-top:7px;
	  }
	  #form font{
	     float:left;
		 clear:both;
		 font-size:12px;
		 font-family:arial;
		 color:#000000;
		 width:47px;
		 margin-top:7px;
		 margin-left:3px;
	  }
	  #saveSessionText[type=text]{
	     float:left;
		 width:266px;
		 height:22px;
		 padding-left:1px;
		 margin-top:4px;
		 margin-bottom:4px;
		 font-size:11px;
		 font-family:arial;
		 color:#37383e;
		 margin-left:6px;
	  }
	  #saveBtn {
	     float:right;
		 margin-top:3px;
		 margin-right:7px;
		 width:60px;
		 cursor:pointer;
	  }
	  .rowRenameText[type=text]{
	     float:left;
		 width:266px;
		 height:22px;
		 padding-left:1px;
		 margin-top:4px;
		 margin-bottom:4px;
		 font-size:11px;
		 font-family:arial;
		 color:#37383e;
	  }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
  var b = chrome.extension.getBackgroundPage()
  sessions = b.loadSessions("autoSessionList");
  var selectedEngine = -1;
  var saveSessionTitle;
  var listTitle;

  function onLoad() {
      if (sessions!=null) {
		  createSessions();
	  }
	  chrome.tabs.getSelected(null, function (tab) {
			if (tab.title!=null) {
				document.getElementById("saveSessionText").value = tab.title;
			}
	  })
	  if ((sessions==null) || (sessions.length==0)) {
		 document.getElementById("list").style.display = 'none';
	  }

	  setBoxesTitlePosition();
  }

  function setBoxesTitlePosition() {
	  var _body = document.getElementsByTagName("body")[0];
	   
	  if (sessions!=null) {
		  if ((listTitle==null) && (sessions.length>0)) {
			  listTitle = document.createElement("div");
			  listTitle.setAttribute("class", "box-title");
			  listTitle.textContent = "Sessions List";
			  _body.appendChild(listTitle);
		  }
	  }
	  if (saveSessionTitle==null) {
		  saveSessionTitle = document.createElement("div");
		  saveSessionTitle.setAttribute("class", "box-title");
		  saveSessionTitle.textContent = "Save Session";
		  _body.appendChild(saveSessionTitle);
	  }
	  if (listTitle) {
		  listTitle.style.top = (document.getElementById("list").offsetTop - 7) + "px"
		  listTitle.style.left = (document.getElementById("list").offsetLeft + 12) + "px"
	  }
	  if (saveSessionTitle) {
		  saveSessionTitle.style.top = (document.getElementById("save-session-box").offsetTop - 7) + "px"
		  saveSessionTitle.style.left = (document.getElementById("save-session-box").offsetLeft + 12) + "px"
	  }
  }

  function loadSession(index) {
      b.loadSession(sessions[index]);
  }


  function cancelRemove(index) {
	  var row = document.getElementById("row-" + index);

	  row._title.innerHTML = sessions.list[index].title;
	  row.remove.style.display = 'block';
	  row.rename.style.display = 'block';
	  row._open.style.display = 'block';
	  row.sep.style.display = 'block';
	  row.sep2.style.display = 'block';

	  row.removeChild(row.no);
	  row.removeChild(row.yes);
  }
  function startRemove(index) {
	  var row = document.getElementById("row-" + index);
	  row._title.innerHTML = "<font style='color:#d3192b'>Are you sure you want to remove this session?</font>";
	
	  row.remove.style.display = 'none';
	  row.rename.style.display = 'none';
	  row._open.style.display = 'none';
	  row.sep.style.display = 'none';
	  row.sep2.style.display = 'none';

	  row.appendChild(row.no);
	  row.appendChild(row.yes);
  }
  function removeSession(index) {

	  sessions.list.splice(index, 1);
	  if (sessions.list.length==0) {
		  document.getElementById("list").style.display = 'none';
		  if (listTitle) listTitle.style.display = 'none';
	  }
	  
	  b.udpateSessions(sessions)
      createSessions();
	  setBoxesTitlePosition();
      if (selectedEngine==index) {
	    selectedEngine = -1;
	  }
  }

  function saveSession() {
		var title = document.getElementById("saveSessionText").value;
		var backgroundPage = chrome.extension.getBackgroundPage();
		backgroundPage.saveSession(title, function() {
			sessions = b.loadSessions();
			if (sessions!=null) {
				var list = document.getElementById("list");
				list.style.display = 'block';
			    if (listTitle) listTitle.style.display = 'block';
				list.appendChild(createRow(sessions.list.length-1));
				setBoxesTitlePosition();
			}
		});	
		document.getElementById("saveBtn").disabled = true;
		document.getElementById("saveSessionText").disabled = true;
  }

  function finishRename(index) {
  		var row = document.getElementById("row-" + index);
		sessions.list[index].title = row.renameTextBox.value;
		row._title.innerHTML =  row.renameTextBox.value;
		b.udpateSessions(sessions);
		setBoxesTitlePosition();
		row.inRenameMode = false;
  }
  function openRename(index) {
		var row = document.getElementById("row-" + index);
		row._title.innerHTML = "";
		row.inRenameMode = true;
		var renameTextBox = document.createElement("input");
		renameTextBox.setAttribute("class", "rowRenameText");
		renameTextBox.setAttribute("type", "text");
		renameTextBox.addEventListener("keyup", function(e) {
			if (e.keyCode==13) {
				finishRename(index);
			}
		},false);
		renameTextBox.value = sessions.list[index].title;
		row.renameTextBox = renameTextBox;
		row._title.appendChild(renameTextBox);
		renameTextBox.focus();
		setBoxesTitlePosition();
  }

  function setRow(row, i) {
          row.innerHTML = "";
		  row.setAttribute("class", "row");

		  var item = sessions[i];
		 

		  var title = document.createElement("div");
		  title.setAttribute("class", "title");
		  var titleText = item.name;
		  if (titleText.length>40) titleText = titleText.substring(0, 40)+"..."
		  title.textContent = titleText;
		  row._title = title;
		  var num = document.createElement("div");
		  num.setAttribute("class", "num");
		  num.textContent = "(" + item.tabCount + "/" + item.windows.length + ") - " + item.date;

		  var sep = document.createElement("div");
		  sep.setAttribute("class", "separator");
		  sep.textContent = "-";
		  row.sep = sep;

		  var sep2 = document.createElement("div");
		  sep2.setAttribute("class", "separator");
		  sep2.textContent = "-";
		  row.sep2 = sep2;


		  row.setAttribute("class", "row");

		  var _open = document.createElement("a");
		  //_open.setAttribute("class", "_open");
		  _open.setAttribute("href", "#");
		  _open.setAttribute("onclick", "return false;");
		  _open.textContent = "Open";
		  _open.index = i;
		  row._open = _open;
		  _open.addEventListener("click", function(e) {
			 loadSession(e.currentTarget.index);
		  },false);

		  var rename = document.createElement("a");
		  rename.setAttribute("class", "link");
		  rename.setAttribute("href", "#");
		  rename.setAttribute("onClick", "return;");
		  rename.textContent = "Rename";
		  rename.index = i;
		  row.rename = rename;
		  rename.addEventListener("click", function(e) {
			 openRename(e.currentTarget.index);
			 e.stopPropagation();
			 e.preventDefault();
		  },false);

		  var remove = document.createElement("a");
		  remove.setAttribute("class", "_open");
		  remove.setAttribute("href", "#");
		  remove.setAttribute("onClick", "return false;");
		  remove.textContent = "Remove";
		  remove.style.marginRight = "5px";
		  remove.index = i;
		  row.remove = remove;
		  remove.addEventListener("click", function(e) {
			 startRemove(e.currentTarget.index);
			 e.stopPropagation();
			 e.preventDefault();
		  },false);

		  var yes = document.createElement("a");
		  yes.setAttribute("class", "_open");
		  yes.setAttribute("href", "#");
		  yes.setAttribute("onClick", "return false;");
		  yes.textContent = "Yes";
		  yes.style.marginRight = "5px";
		  yes.index = i;
		  yes.addEventListener("click", function(e) {
			 removeSession(e.currentTarget.index);
			 e.stopPropagation();
			 e.preventDefault();
		  },false);
		  var no = document.createElement("a");
		  no.setAttribute("class", "_open");
		  no.setAttribute("href", "#");
		  no.setAttribute("onClick", "return false;");
		  no.textContent = "No";
		  no.style.marginRight = "5px";
		  no.index = i;
		  no.addEventListener("click", function(e) {
			 cancelRemove(e.currentTarget.index);
			 e.stopPropagation();
			 e.preventDefault();
		  },false);
		  row.no = no;
		  row.yes = yes;

		  row.addEventListener("click", function(e) {
		     if (e.currentTarget.inRenameMode==true) {
			    if (e.target.className!="rowRenameText") {
					finishRename(e.currentTarget.index);
				}
			 }
		  },false);

		  row.appendChild(title);
		  row.appendChild(num);
		  row.appendChild(remove);
		  row.appendChild(sep);
		  row.appendChild(rename);
		  row.appendChild(sep2);
		  row.appendChild(_open);
  }
function das(i) {
	var _sessions = b.delAutoSession(i);
	if(_sessions!=null) {
		sessions = _sessions;
		createSessions();
	}
	//$("#row-"+i).remove();
}

function createItem(i) {
	var item = sessions[i];
	var name = item.name;
	if(name.length>40) {
		name = name.substring(0, 40) + "...";
	}
	var row = "<div id=\"row-" + i + "\" class=\"row\">"
			+ "<div class=\"title\">" + name + "</div>"
			+ "<div class=\"num\">(" + item.tabCount + "/" + item.windows.length + ") - " + item.date + "</div>"
			+ "<a class=\"_open\" href=\"#\" onclick=\"das("+i+");\">Remove</a>"
			+ "<div class=\"separator\">-</div>"
			+ "<a class=\"link\" href=\"#\" onclick=\"return;\">Rename</a>"
			+ "<div class=\"separator\">-</div>"
			+ "<a href=\"#\" onclick=\"return false;\">Open</a>"
			+ "</div>";
	return row;
}

function createSessions() {
	var list = $("#list");
	list.empty();
	for (var i=0;i<sessions.length;i++) {
		list.append(createItem(i));
	}
}

</script>
</head>
<body onload="onLoad()">
  <center>
  <div id="main">
      <div id="list"></div>
      <div id="save-session-box">
		 <input id="saveSessionText" type="text" value=""/>
		 <input id="saveBtn" type="button" value="Save" xdisabled="true" onclick="saveSession()"/>
      </div>
  </div>
</body>
</html>
